<template>
	<div>
		<div class="top">
			<img src="@as/img/zuzhi_wode_ptt@2x.png" alt="">
		</div>
		<div class="list">
			<div class="box">
				<div class="title">
					<img src="@as/img/zuzhi_wode_lf@2x.png" alt="">
					<span>举报须知</span>
					<img src="@as/img/zuzhi_wode_rf@2x.png" alt="">
				</div>
				<p>
					本系统受理反映“四风”问题举报，具体包括公款大吃大喝、公款旅游（国内）、公款出国（境）旅游、违规配备使用公车、违规建设楼堂馆所、津贴补贴违规问题、违规收送礼品礼金、大办婚丧喜庆事宜、提供或接受超标准接待、接受或用公款参与高消费娱乐健身活动、违规出入私人会所、培训疗养机构“四风”问题。
				</p>
			</div>
			<div class="qd">
				<mu-checkbox v-model="normal.checkbox"></mu-checkbox>
				<span>我已阅读以上条款</span>
			</div>
			<div v-if="normal.checkbox == false" style= "background:#ddd" class="btn">
				<span>确认</span>
			</div>
			<div v-if="normal.checkbox == true"  class="btn" @click="supervise">
				<span>确认</span>
			</div>


			
		</div>
	
	</div>
</template>

<script>
	export default {
			data() {
				return {
					normal: {
						checkbox: false,
						styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
					}
				}
			},
			mounted() {
				this.$progress.done()
			},
			methods: {
				supervise(){
					this.$router.push('../organization/supervise') 
				},
			},
	}
</script>

<style scoped lang="scss">
.mu-checkbox{
	color: #ddd !important;
}
.mu-checkbox-checked{
	color: #eb4d44 !important;
}
.qd{
	width:100%;
	padding: 15px 15px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 68px;
	span{
		font-size: 12px;
		color: #999;
		margin-left: 5px;
	}
}
	.top{
		width:100%;
		height:211.5px;
		overflow: hidden;
		position: relative;
		z-index: 10;
		img{
			width:100%;
			height:100%;
		}
	}
	.list{
		width:100%;
		padding: 15px 15px;
		box-sizing: border-box;
		justify-content: center;
		position: absolute;
		left:0;
		top:175px;
		.box{
			width:100%;
			padding: 38px 15px 30px 15px;
			box-shadow: 0px 6px 10px 2px #f1f1f1;
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				width:100%;
				display: flex;
				justify-content: center;
				align-items: center;
				img{
					width:69px;
					height:6.5px;
				}
				span{
					font-size: 18px;
					color: #333;
					margin-left: 10px;
					margin-right: 10px;
					font-weight: bold;
				}
			}
			p{
				font-size: 14px;
				color: #666;
				text-indent: 2em;
				line-height: 1.8;
				margin-top: 15px;
			}
		}
		.btn{
			width:100%;
			height:44px;

			background: #eb4d44;
			border:none;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
				span{
				font-size: 16px;
				color: #fff;
			}
		}
	}
</style>